<template>
  <view class="card-wrap">
    <view class="header-title" v-if="title">
      <view class="title-wrap">
        {{ title }}
        <ve-tooltip v-if="$slots.tooltip" placement="top">
          <template #content><slot name="tooltip"></slot></template>
          <ve-icon class="help-icon" name="headertipsgray" size="32"></ve-icon>
        </ve-tooltip>
      </view>
      <slot name="extra"></slot>
    </view>
    <view class="card-content">
      <slot></slot>
    </view>
    <view class="card-empty" v-if="empty || !$slots.default">
      <ve-empty marginTop="12" :text="description"></ve-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '暂无数据~',
    },
    empty: Boolean,
  })
</script>
<style lang="scss" scoped>
  .card-wrap {
    width: 100%;
    background: #fff;
    padding: 32rpx 24rpx;
    margin: 20rpx 0;
    .header-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #191c27;
      line-height: 32rpx;
      color: #333333;
      padding-bottom: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      .title-wrap {
        display: flex;
        align-items: center;
        gap: 8rpx;
      }
    }
    .card-content {
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx;
    }
    .card-empty {
      display: flex;
      justify-content: center;
    }
  }

  :deep(.empty-block) {
    image {
      margin-top: 0;
    }
  }
</style>
